<template>
    <div style="margin: 0 50px">
        <el-form :label-position="'top'" :model="ruleForm" :rules="rules" @validate="onValid">
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" type="text" placeholder="手机号" clearable >
                    <template #prefix>
                        <el-icon><User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <el-form-item >
            <div>
                <el-row>
                    <el-col :span="16">
                        <el-input v-model="ruleForm.code" type="text" placeholder="验证码" style="width: 200px">
                            <template #prefix>
                                <el-icon><Message /></el-icon>
                            </template>
                        </el-input>
                    </el-col>
                    <el-col :span="8">
<!--                        phoneValid一开始是false,timeout一开始是false,那么这个按钮不可以按,因为!phoneValid是true
                            当校验通过后,phoneValid是true,那么这个按钮是可以按的-->
                        <el-button ref="codeButton" :disabled="!codeValid.phoneValid||codeValid.timeout" @click="getCode" style="width: 100px;">
                            {{codeValid.buttonText}}
                        </el-button>
                    </el-col>
                </el-row>
            </div>
        </el-form-item>

        <div style="margin-bottom: 20px;margin-top: 20px">
            <el-button type="success" style="margin-right: 10px" @click="login">登录</el-button>
            <el-divider direction="vertical" />
            <el-button type="warning" style="margin-left: 10px" @click="router.push('/register')">注册</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Message, User} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import router from "@/router";
import {get,post} from '@/assets/ts/ruquestMethod'
import type { FormItemProp, FormRules} from "element-plus";
import {ElMessage} from "element-plus";

const login= () => {
    post('/accounts/loginphone',
        {
            phone : ruleForm.phone,
            code : ruleForm.code
        },
        (data:any) =>{
            if(data.status === 1){
                ElMessage.success(data.message)
                sessionStorage.setItem('loginName',data.data.userid)
                router.push('/index')
            }
            if(data.status === 0){
                ElMessage.warning(data.message)
            }
        }
    )
}

const getCode = () => {
    get('/accounts/code?phone='+ruleForm.phone,
        (data:any) => {
            if(data.status === 1){
                ElMessage.success(data.message)
                codeValid.timeout = true
                time = 60
                timer1()
            }
            if(data.status === 0){
                ElMessage.warning(data.message)
            }
        }
    )
}

const validPhone = (rule: any, value: any, callback: any) => {
    if(value == '')
        callback(new Error('请输入手机号'))
    else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value))
        callback(new Error('请输入格式正确的手机号'))
    else
        callback()
}
const onValid = (prop: FormItemProp, isValid: boolean) => {
    if(prop === 'phone'){
        codeValid.phoneValid = isValid
    }
}
function timer1(){
    if(time > 0){
        time--
        codeValid.buttonText = time +'s后重新获取'
        timer = setTimeout(timer1,1000)
    }else {
        time = 0
        codeValid.buttonText = '获取验证码'
        codeValid.timeout = false
        clearTimeout(timer)
    }
}
const rules = reactive<FormRules>({
    phone: [{validator: validPhone,trigger:['blur','change']}]
})

const ruleForm = reactive({
    account : '',
    password : '',
    rePassword : '',
    phone : '',
    code : '',
})
let codeValid = reactive({
    phoneValid : false,
    timeout : false,
    buttonText: '获取验证码'
})
const codeButton = ref(null)
let time = 0, timer: number | undefined
</script>

<style scoped>

</style>